import React, { Component } from 'react'
import { Card, Table, message, Button, Modal } from "antd"
import { reqAdminFileList, reqAdminFileDelete } from '../../../../api'
import { to } from '../../../../utils'
import config from '../../../../config'
import copy from 'copy-to-clipboard'
import './adminFileList.less'
export default class AdminFileList extends Component {
    state = {
        current: 1,
        size: 10,
        total: 0,
        dataSource: [],
        loading: false,
        newFilename: '',
        confirmLoading: false,
    }

    componentDidMount() {
        this.getFileList()
    }

    getFileList = async () => {
        this.setState({ loading: true })
        let [err, res] = await to(reqAdminFileList(this.state.current, this.state.size))
        this.setState({ loading: false })
        if (err) return console.log(err)
        if (res.code !== 0) return message.error(res.msg)

        let fileList = res.body.fileList
        fileList.forEach(file => {
            file.kSize = (file.size / 1024).toFixed(1) + 'kb'
            file.modifyTime = file.mtime
        })
        this.setState({
            total: res.body.total,
            dataSource: fileList,
        })
    }

    copyLink = (record) => {
        let link = config.public + '/user/' + record.username + '/' + record.fileName
        if (copy(link)) {
            message.success('已复制到剪切板!')
        } else {
            message.error('复制失败,请手动复制!')
            Modal.info({
                title: '请手动复制!',
                content: (
                    <div>{link}</div>
                ),
                onOk() { },
            });
        }
    }

    delete = (record) => {
        let that = this
        Modal.confirm({
            title: `确定删除文件: ${record.fileName} 吗?`,
            okText: '确定',
            okType: 'danger',
            cancelText: '取消',
            async onOk() {
                that.setState({ loading: true })
                let [err, res] = await to(reqAdminFileDelete(record.fileName, record.username))
                that.setState({ loading: false })
                if (err) return console.log(err)
                if (res.code !== 0) {
                    message.error(res.msg)
                    return
                }
                message.success(res.msg)
                that.getFileList()
            }
        })

    }

    handleTableChange = (pagination) => {
        this.setState({
            current: pagination.current
        }, () => {
            this.getFileList()
        })
    }

    render() {
        const { dataSource, total, size, loading } = this.state
        const columns = [
            {
                title: '文件名',
                dataIndex: 'fileName',
                key: 'fileName',
            },
            {
                title: '用户名',
                dataIndex: 'username',
                key: 'username',
            },
            {
                title: '大小',
                dataIndex: 'kSize',
                key: 'kSize',
            },
            {
                title: '修改时间',
                dataIndex: 'modifyTime',
                key: 'modifyTime',
            },
            {
                title: '操作',
                dataIndex: '',
                key: 'cz',
                render: (text, record) => (
                    <span>
                        <Button type="link" onClick={() => this.copyLink(record)}>复制链接</Button> |
                        <Button type="link" target="_blank" href={config.public + '/user/' + record.username + '/' + record.fileName}>打开文件</Button> |
                        <Button type="link" onClick={() => this.delete(record)}>删除</Button>
                    </span>
                ),
            },
        ]
        return (
            <Card title="用户文件列表" className="file-list">
                <Table
                    dataSource={dataSource}
                    columns={columns}
                    rowKey='ino'
                    pagination={{ total, defaultPageSize: size }}
                    loading={loading}
                    onChange={this.handleTableChange}
                />
            </Card>
        )
    }
}
